<!--Api选择-->
<template>
  <div class="bg">

    <div class="all clear" @click="blankClick"></div>

    <div class="bg1" v-if="apis != null || exchanges != null">
      <!--标题-->
      <div class="title bg2">
        <text class="all font32 text1">{{T('选择API')}}</text>
        <text class="font60 text1 add" @click="addClick">{{'+'}}</text>
      </div>

      <!--菜单-->
      <div class="menu bg2" v-if="type == -1">
        <div class="menu-content" v-for="(item, index) in menus" v-bind:key="index"  @click="menuClick(index)">
          <text :class="['font32', menu == index ?'text1' : 'text3']">{{T(item)}}</text>
          <div class="menu-line main1" v-if="menu == index"></div>
        </div>
      </div>

      <!--实盘-->
      <list class="list bg1" :loadmoreoffset="50" @loadmore="httpStrategyRun" v-if="menu == 0 && apis.length">
        
        <cell v-for="(item, index) in apis" v-bind:key="index" @click="cellClick(item)">
            <div class="cell bg2">
              <div class="cell-content">
                <LImage class="cell-image" :src="Config.img(getStateImage(item))"></LImage>
                
                <text :class="['font30', getState(item) ? 'text1' : 'text2']">{{item.apiName}}</text>
                <text class="font24 text2" v-if="item.remarks && item.remarks.length">{{'('+item.remarks+')'}}</text>

                <text class="font22 text2">{{'  '+ getStateTag(item)}}</text>
                <div class="all"></div>
                <LImage class="cell-select" :src="Config.img('check_white.png')" v-if="item.apiId == apiId"></LImage>
              </div>
              <div v-if="index < apis.length-1" class="cell-line no1"></div>
            </div>
          </cell>
      </list>
      <div class="tipe" v-else-if="menu == 0">
        <LImage class="tipe-image" :src="Config.img('list_empty.png')"></LImage>
        <text class="font30 text1">{{T('您当前没有API')+','}}</text>
        <text class="font30 text1">{{T('想要参与真实交易，请先录入API')+'~'}}</text>
      </div>

      <!--模拟盘-->
      <list class="list bg1" :loadmoreoffset="50" @loadmore="httpStrategyRun" v-if="menu == 1 && exchanges.length">

        <cell v-for="(item, index) in exchanges" v-bind:key="index"  @click="cellClick(item)">

          <div class="cell bg2">
            <div class="cell-content">
              <LImage class="cell-image" :src="Config.img('v2_'+item.exchangeName.toLowerCase()+'.png')"></LImage>
              <text class="font30 text1">{{item.exchangeName}}</text>
              <text class="font22 text2">{{'  '+T('可用')}}</text>
              <div class="all"></div>
              <LImage class="cell-select" :src="Config.img('check_white.png')" v-if="item.exchangeId == exchangeId"></LImage>
            </div>
            <div v-if="index < exchanges.length-1" class="cell-line no1"></div>
          </div>
        </cell>
      </list>
    </div>
  </div>
</template>

<script>

import navigator from "@/_js/navigator"; 
import broadcast from "@/_js/broadcast"; 
import Config from "@/_js/config";
import math from "@/_js/math";
import API from "@/_js/api";
import jdebug from "@/_js/debug";

const weexFunction = weex.requireModule("WeexFunction");

import I18N from "@/_i18n/i18n";
var T = I18N.t;

export default {
  
  data() {
    return {
      T:T,
      Config:Config,
      PATH:"https://obs-vt.obs.ap-southeast-1.myhuaweicloud.com/res/weex/strategy/",

      
      type:-1, //0实盘 1模拟盘 -1全显
      menu:0, //菜单
      menus:['实盘账户', '模拟账户'],

      apiId:'', //默认选中apiId
      exchangeId:'', //默认选中交易所Id
 
      apis:undefined, //Api数组
      exchanges:undefined,
      supports:undefined, // 支持选择的交易所
    };
  },

  mounted() {
    
    this.type = navigator.getParam("type") != null ? navigator.getParam("type") : this.type;
    this.menu = navigator.getParam("menu") != null ? navigator.getParam("menu") : this.menu;

    this.apiId = navigator.getParam("apiId");
    this.exchangeId = navigator.getParam("exchangeId");
    this.supports = navigator.getParam("supports"); // 支持选中的交易所


    // 加载实盘API
    API.getApis('YES', 'all', this.supports, (apis)=>{
      apis = apis ? apis : [];
      var yess = []; //同步成功
      var nos = []; //同步失败
      var times = []; //已过期
      var trusts = []; //已托管
      for (let index = 0; index < apis.length; index++) {
        var api = apis[index];

        if (math.getNumber(api.expireTime) <= 0) {
          times.push(api);
        } else if (api.isExpire) {
          nos.push(api);
        } else if (api.isFundApi) {
          trusts.push(api);
        } else {
          yess.push(api);
        }
      }
      var datas = [];
      datas.push(...yess);
      datas.push(...trusts);
      datas.push(...nos);
      datas.push(...times);
      this.apis = datas;
    });
    

    // 加载模拟盘API
    API.getMockApis(this.supports, (apis)=>{
      this.exchanges = apis;
    });
    
  },

  methods: {


    /********************************** Get方法*/
    //获取可用状态
    getState(item){
      
      if (math.getNumber(item.expireTime) <= 0) {
        return false;
      } else if (item.isExpire) {
        return false;
      } else if (item.isFundApi) {
        return false;
      } else {
        return true;
      }
    },

    //获取状态标签
    getStateTag(item){

      if (math.getNumber(item.expireTime) <= 0) {
      return T('已过期');
      } else if (item.isExpire) {
      return T('同步失败');
      } else if (item.isFundApi) {
        return T('托管中');
      } else {
        return T('可用');
      }
    },

    //获取状态图片
    getStateImage(item) {
      return 'v2_' + (this.getState(item) ? item.exchangeName.toLowerCase()+'.png' : item.exchangeName.toLowerCase()+'_.png');
    },
     

    /********************************** 点击触发*/
    //空白处点击
    blankClick(){
      navigator.dismiss();
    },

    //菜单
    menuClick(index){
      this.menu = index;
    },

    //添加
    addClick(){
      this.blankClick();
        var nav = {'navColor':'#0c0c0c'};
        navigator.open('', 'home/ApiAdd', undefined, nav);
    },

    //cell点击
    cellClick(item){
      if (this.menu == 1 || this.getState(item)) {
        broadcast.send('SelectApi', item);
        this.blankClick();
      }
    }
  }
}

</script>


<style src="@/_css/style.css"></style>
<style scoped>
.bg {
  width: 750px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.clear {
  background-color: #000000;
  opacity: 0.25;
}

/*************** 标题*/
.title{
  flex-direction: row;
  align-items: center;

  width: 750px;
  height: 110px;
  padding-left: 40px;
  padding-right: 40px;
}
.add{
  height: 110px;
  line-height: 110px;
}

/*************** 菜单*/
.menu {
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  width: 750px;
  height: 84;
  padding-left: 40px;
  padding-right: 40px;
}
.menu-content {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 84;
}
.menu-line {
  position: absolute;
  width: 80px;
  height: 6px;
  border-radius: 3px;
  bottom: 0;
}

/*************** api*/
.list {
  margin-top: 2px;
  width: 750px;
  height: 600px;
}
.cell {
  width: 750px;
  align-items: center;
}
.cell-content {
  flex-direction: row;
  align-items: center;
  width: 670px;
  height: 100px;
}
.cell-line {
  width: 670px;
  height: 1px;
  bottom: 0;
}
.cell-image {
  width: 40px;
  height: 40px;
  margin-right: 30px;
}
.cell-select {
  width: 32;
  height: 32;
}

/*************** 提示*/
.tipe {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 2px;
  width: 750px;
  height: 600px;
}
.tipe-image{
  width: 378px;
  height: 305px;
  margin-bottom: 40px;
}
.tipe-width {
  width: 670px;
}

.tipe-but{
  flex-direction: row;
  align-items: center;
  height: 52px;
  border-width: 2px;
  margin-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 4px;
}
</style>